<template>
  <div id="files">
    <van-checkbox-group :value="checkedFiles" @change="changeCustomer" :max="1999">
    <scroll-view class="list-content" :style="$store.state.user.userInfo.permit === 0 ? 'height: calc(100vh);' : 'height: calc(100vh - 88rpx);'">
      <van-grid :gutter="10">
        <van-grid-item use-slot v-for="item in folders" :key="item.id" link-type="navigateTo" :url="'/pages/user/user?folderId=' + item.id">
          <div class="grid-content">
            <van-checkbox :name="item.id"  @tap.stop style="margin-bottom: 20upx;margin-left: 5upx;" v-if="showBatch">
            </van-checkbox>
            <van-icon name="idcard"></van-icon>
            <span>{{ item.name }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </scroll-view>
    </van-checkbox-group>
    <view class="button-area" v-if="$store.state.user.userInfo.permit === 1 || $store.state.user.userInfo.permit === 2">
      <van-button type="info" :loading="loadingButton" @click="addFolder" round  class="tag-btn">
        添加文件夹
      </van-button>
      <van-button type="default" :loading="loadingButton"  round class="tag-btn" @click="showBatch = !showBatch" v-if="checkedFiles.length === 0">
        其他操作
      </van-button>
      <van-button type="danger" :loading="loadingButton"  round class="tag-btn" v-if="checkedFiles.length > 0" @click="deleteFolders">
        删除文件夹
      </van-button>
    </view>
    <van-action-sheet :show="showAdd" title="创建文件夹" @close="onClose"  :close-on-click-overlay="true">
      <view id="search-form">
        <view class="search-goods">
          <van-cell-group>
            <van-field
                :value="form.folderName"
                clearable
                :placeholder="'请输入创建文件夹名称'"
                data-name="folderName"
                @change="folderNameChange"
            >
            </van-field>
          </van-cell-group>
        </view>
        <view style="text-align: center;padding:20rpx;">
          <van-button type="info" :loading="loadingButton" @click="addFiles" round >
            创建文件夹
          </van-button>
        </view>
      </view>
    </van-action-sheet>
  </div>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import {reqAddFolders, reqDeleteFolders, reqFoldersList} from "../../api/user";

export default {
  name: "files",
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog
  },
  data () {
    return {
      loadingButton: false,
      showAdd: false,
      form: {
        folderName: '',
        home: ''
      },
      columns: [],
      checkedFiles: [],
      showBatch: false,
      folders: []
    }
  },
  methods: {
    async getFiles () {
      const { data } = await reqFoldersList({
        companyId: this.$store.state.user.userInfo.company,
      });

      this.folders = data.messageBody;
    },
    addFiles () {
      if (!this.form.folderName){
        return uni.showToast({
          title: '请输入创建文件夹名称'
        })
      }
      this.loadingButton = true;
      reqAddFolders({
        name: this.form.folderName
      }).then(() => {
        this.loadingButton = false;
        uni.showToast({
          title: '添加成功!',
          icon: 'success'
        })
        this.showAdd = false;
        this.getFiles();
      }).catch(() => {
        this.loadingButton = false;
      })
    },
    deleteFolders () {
      if (!this.checkedFiles){
        return uni.showToast(({
          title: '请选择需要删除的文件夹'
        }))
      }
      uni.showModal({
        title: '确定删除这些文件夹吗?',
        success: res => {
          if (res.confirm){
            reqDeleteFolders({
              id: this.checkedFiles.join(',')
            }).then(() => {
              uni.showToast({
                title: '删除成功!'
              })
            })
          }
        }
      })
    },
    changeCustomer (e) {
      this.checkedFiles = e.detail;
    },
    showFiles () {
      this.$refs.popup.open()
    },
    addFolder () {
      this.showAdd = true;
    },
    onClose () {
      this.showAdd = false;
      this.form.folderName = '';
      this.form.home = '';
    },
    folderNameChange (e) {
      this.form[e.currentTarget.dataset.name] = e.detail;
    }
  },
  mounted () {
    this.getFiles();
  }
}
</script>

<style lang="less">
#files{
  min-height: 100vh;
  background: #F6F6F6;
  .grid-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span{
      font-size: 30upx;
      display: inline-block;
      margin-top: 20upx;
      max-width: 140upx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
  .button-area {
    padding: 0.4rem 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0px 0px 1px 0px #333333;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .button-area .tag-btn {
    margin: 0 0.6rem;
    border-radius: 4px;
  }

  .button-area .van-button{
    width: 300rpx !important;
  }
  .button-area .van-button--primary {
    background: #4791F4;
    border: 1px solid #4791F4;
  }
}
</style>